﻿@{
    ViewBag.Title = "Home Page";
}

@section scripts{
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/echarts-5.1.0/package/dist/echarts.js"></script>
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
    <script type="text/javascript">


        var chartDom = document.getElementById('mainleft');
        var myChart = echarts.init(chartDom);
        var option;


        option = {
            title: {
                text: '温度监控',
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['-10', '-9', '-8', '-7', '-6', '-5', '-4', '-3', '-2', '-1', 'Now']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    label: {
                        show: true,
                        position: 'top'
                    },
                    name: '当前温度值',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    
                }
            ]
        };

        option && myChart.setOption(option);

        var chartDom1 = document.getElementById('mainright');
        var myChart1 = echarts.init(chartDom1);
        var option1;

        option1 = {
            title: {
                text: '压力监控',
            },
            tooltip: {
                trigger: 'axis'
            },
            
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['-10', '-9', '-8', '-7', '-6', '-5', '-4', '-3', '-2', '-1', 'Now']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    label: {
                        show: true,
                        position: 'top'
                    },
                    name: '当前压力值',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                }
            ]
        };

        option1 && myChart1.setOption(option1);
      
        $(function () {
            //引用自动生成的集线器代理
            var chat = $.connection.serverHub;
            debugger
            //定义服务器调用的客户端sendMessage来显示新消息
            chat.client.sendMessage = function (value, message) {
                debugger
                var dataResult = value[0]; //获取到服务端数据，重新赋值(温度)
                var dataResult1 = value[1]; //获取到服务端数据，重新赋值(压力)
                myChart.setOption({
                    series: [
                        {
                            name: '当前温度值',
                            type: 'line',
                            data: dataResult,
                        }
                    ]
                });
                myChart1.setOption({
                    series: [
                        {
                            name: '当前压力值',
                            type: 'line',
                            data: dataResult1,
                        }
                    ]
                });
            }
            //开始连接服务器
            $.connection.hub.start().done(function () {
                setInterval(function () {
                    chat.server.sendMsg("请求数据");//调用服务器端集线器的Send方法
                }, 1000)
            })
        })

    </script>
}
    <div class="row">
        <div class="col-md-6">
            <div id="mainleft" style="width: 100%;height:700px;"></div>
        </div>
        <div class="col-md-6">
            <div id="mainright" style="width: 100%;height:700px;"></div>
        </div>
    </div>


